<!doctype html>
<html lang="en">
  <head>
    <script src="../../helpers/header.js" type="module"></script>
    <script src="index.js" type="module"></script>
    <link rel="stylesheet" href="style.scss" />
  </head>
  <body>
    <div class="container">
      <div id="commentContainer">
        <div class="reset-wrapper">
          <button class="btn btn-primary" id="reset">Reset</button>
        </div>
        <div class="sub-comments"></div>
      </div>
    </div>

    <template id="comment-template">
      <div class="comment-wrapper">
        <div class="main-comment">
          <img
            src="https://icon-library.com/images/anonymous-icon/anonymous-icon-28.jpg"
            alt="profile"
            class="profile-pic"
            loading="lazy"
          />

          <div class="content">
            <div class="header">
              <input type="text" class="username-input hide" placeholder="User name" />
              <div class="user-info hide">
                <h3 class="username"></h3>
              </div>
            </div>

            <p class="comment-text"></p>

            <div class="footer">
              <button class="reply hide">Reply</button>
              <button class="edit hide">Edit</button>
              <button class="cancel hide">Cancel</button>
              <button class="submit hide">Post</button>
              <button class="delete hide">Delete</button>
            </div>
          </div>
        </div>

        <div class="sub-comments"></div>
      </div>
    </template>
  </body>
</html>
